<%--
  Created by IntelliJ IDEA.
  User: Admin
  Date: 2022/10/20
  Time: 10:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/img/jiejie_logo_s.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/XQing.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/head.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/XQing_TanChuang.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <title>>影院热映大片_热映电影票房_高清电影影视大全-杰杰电影-电影详情</title>
</head>
<body>
<!-- 头部导航 -->
<div class="header">
    <div class="header-inner">
        <div class="nav">
            <!-- logo -->
            <div class="logo">
                <a href="${pageContext.request.contextPath}/index.jsp"><img src="${pageContext.request.contextPath}/img/jiejie_logo.png" alt=""></a>
            </div>
            <div>
                <div class="menu-item"><a href="${pageContext.request.contextPath}/index.jsp">首页</a></div>
                <div class="menu-item"><a href="${pageContext.request.contextPath}/pages/films.jsp">电影</a></div>
                <div class="menu-item"><a href="${pageContext.request.contextPath}/pages/cinema.jsp">影院</a></div>
                <div class="menu-item"><a href="${pageContext.request.contextPath}/orderby">榜单</a></div>
            </div>

            <div class="search-form">
                <input type="text" class="search-text">
                <a href=""><span class="search-img"></span></a>

            </div>
            <div class="head-user">
                <a href="login.jsp" class="loginBtn">登录</a>
                <a href="regist.html" class="loginBtn">注册</a>
            </div>
            <div class="user-info">
                <div class="user-avatar has-login">
                    <img src="${pageContext.request.contextPath}/img/touxiang.png">
                    <ul class="user-menu yes-login-menu">
                        <li class="text"><a href="">我的订单</a></li>
                        <li class="text login-name" ><a href="javascript:void 0">基本信息</a></li>
                        <li class="text"><a href="javascript:void 0" class="J-logout" data-act="logout-click">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 避免下面的块上移 -->
<div class="header-m"></div>


<!-- 简介栏 -->
<div class="banner">
    <div class="wrapper clearfix">
        <!-- 左盒子 -->
        <div class="celeInfo-left">
            <div class="avatar-shadow">
                <img class="avatar" src="${pageContext.request.contextPath}/${movie.moviePicture}">
                <div class="movie-ver">
                    <i class="imax3d"></i>
                </div>
            </div>
        </div>
        <!-- 右盒子 -->
        <div class="celeInfo-right clearfix">
            <div class="movie-brief-container">
                <h1 class="name">${movie.movieCname}</h1>
                <div class="ename ellipsis">${movie.movieEname}</div>
                <ul>
                    <li class="ellipsis">
                        <c:forEach var="type" items="${listType}">
                        <a href="films.html" class="text-link" target="_bank">${type}</a>
                        </c:forEach>
                    </li>
                    <li class="ellipsis"> ${movie.movieArea} / 时长:${movie.movieDuration}</li>
                    <li class="ellipsis">${movie.movieOpenhours}${movie.movieShowArea}上映</li>
                </ul>
            </div>

            <div class="action-buyBtn">
                <div class="action clearfix" data-val="{movieid:893936}">
                    <a href="javascript:void 0" class="wish">
                        <div>
                            <i class="icon wish-icon"></i>
                            <span class="wish-msg">收藏</span>
                        </div>
                    </a>

                    <a href="javascript:void 0" class="score-btn">
                        <div>
                            <i class="icon score-btn-icon"></i>
                            <span class="score-btn-msg">评分</span>
                        </div>
                    </a>
                </div>
                <a href="movieSchedule?movieId=${movie.movieId}" class="btn buy">特惠购票</a>
            </div>

            <div class="movie-stats-container">
                <div class="movie-index">
                    <p class="movie-index-title">杰杰口碑:</p>
                    <div class="movie-index-content score normal-score">
                        <span class="index-left no-info">${allCommentsScore}分</span>
                    </div>
                </div>

                <div class="movie-index">
                    <p class="movie-index-title">累计票房</p>
                    <div class="movie-index-content box">
                        <span class="stonefont">${movie.orther2}</span>
                        <span class="unit">万</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 详情导航栏 -->
<div class="tab-title-container-active">
    <div class="tab-title-container">
        <div class="tab-title">介绍</div>
        <div class="tab-title">演职人员</div>
        <div class="tab-title">奖项</div>
        <div class="tab-title">图集</div>
    </div>
</div>
<!-- 剧情简介 -->
<div class="module-active">
    <div class="module">
        <div class="mod-title">
            <h2>剧情简介</h2>
        </div>
        <div class="mod-content">
                <span class="dra">
                    ${movie.orther1}
                </span>
        </div>
    </div>

    <div class="module">
        <div class="mod-title">
            <h2>演职人员</h2>
            <a href="" class="more">全部</a>
        </div>
        <div class="mod-content">
            <div class="cele-contanier">
                <div class="cele-group">
                    <div class="cele-type"> 导演 </div>
                    <ul class="cele-list">
                        <c:forEach items="${movieAndCastDYCastMap}" var="daoyan">
                            <li class="cele">
                                <a href="" class="portrait">
                                    <img src="${pageContext.request.contextPath}/${daoyan.value.castPicture}" alt="" class="default-img">
                                </a>
                                <div class="info">
                                    <a href="" class="name">${daoyan.value.castEname}</a>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
                <div class="cele-group">
                    <div class="cele-type"> 演员 </div>
                    <ul class="cele-list">
                        <c:forEach items="${movieAndCastYYCastMap}" var="cast">
                            <li class="cele-actor">
                                <a href="" class="portrait">
                                    <img class="default-img" src="${pageContext.request.contextPath}/${cast.value.castPicture}" alt="">
                                </a>
                                <div class="info">
                                    <a href="" class="name">${cast.value.castEname}</a><br>
                                    <span class="role">${cast.key.movieAndCastRole}</span>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="module">
        <div class="mod-title">
            <h2>图集</h2>
            <a href="" class="more">全部</a>
        </div>
        <div class="mod-content">
            <div class="album clearfix">
                <div class="img1">
                    <img class="default-img" src="${pageContext.request.contextPath}/img/XQing_img1.jpg" alt="">
                </div>
                <div class="img2">
                    <img class="default-img" src="${pageContext.request.contextPath}/img/XQing_img2.jpg" alt="">
                </div>
                <div class="img3">
                    <img class="default-img" src="${pageContext.request.contextPath}/img/XQing_img3.jpg" alt="">
                </div>
                <div class="img4">
                    <img class="default-img" src="${pageContext.request.contextPath}/img/XQing_img4.jpg" alt="">
                </div>
                <div class="img5">
                    <img class="default-img" src="${pageContext.request.contextPath}/img/XQing_img5.jpg" alt="">
                </div>
            </div>
        </div>
    </div>

    <div class="module" id="dianzanFather">
        <div class="mod-title">
            <h2>热门短评</h2>
            <button id="comment-entry">写短评</button>
            <div id="myModal">
                <!--弹窗头部-->
                <div class="modal">
                    <div class="modal-header">
                        <p>快来说说你的看法</p>
                        <span class="close">&times;</span>
                    </div>
                    <!--弹窗文本-->
                    <div class="modal-content">
                        <textarea name="" id="modalContent" cols="30" rows="5" placeholder="请写下你的看法"></textarea>
                    </div>
                    <!--弹窗底部-->
                    <div class="modal-footer">
                        <button class="fabuBtn" style="display:block;margin:0 auto">发布</button>
                    </div>
                </div>
            </div>

 <c:forEach items="${commentsAndCustomerList}" var ="comment">
<%--     评论ID--%>
<span class="commentId" hidden="hidden">${comment.key.commentsId}</span>
            <div class="mod-content">
                <div class="comment-list-container">
                    <ul>
                        <li class="comment-container">
                            <div class="portrait-container">
                                <div class="portrait">
                                    <img src="${pageContext.request.contextPath}/img/XQing_default3.jpg" alt="">
                                </div>
                            </div>

                            <div class="main">

                                <div class="main-header clearfix">

                                    <div class="user">
                                        <span class="name">${comment.value.customerName}</span>
                                        <span class="tag">购</span>
                                    </div>

                                    <div class="time">
                                        <span>${comment.key.commentsCreateTime}</span>
                                        <ul class="score-star clearfix">
                                            <li>
                                                <i class="half-star left active"></i>
                                                <i class="half-star right active"></i>
                                            </li>
                                            <li>
                                                <i class="half-star left active"></i>
                                                <i class="half-star right active"></i>
                                            </li>
                                            <li>
                                                <i class="half-star left active"></i>
                                                <i class="half-star right active"></i>
                                            </li>
                                            <li>
                                                <i class="half-star left active"></i>
                                                <i class="half-star right active"></i>
                                            </li>
                                            <li>
                                                <i class="half-star left active"></i>
                                                <i class="half-star right active"></i>
                                            </li>
                                        </ul>
                                    </div>

                                    <div class="operation-comment">
                                        <span class="report">举报</span>
                                        <div class="approve ">
                                            <i class="approve-icon" COMID="${comment.key.commentsId}"></i>
                                            <span class="num">${comment.key.commentsLikes}</span>
                                        </div>
                                    </div>

                                </div>

                                    <div class="comment-content">${comment.key.commentsContent}</div>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
            </c:forEach>
        </div>
    </div>
</div>
<div hidden="hidden">
    <span class="movieId">${movie.movieId}</span>
</div>
<div hidden="hidden">
    <span class="movieStatus">${movie.movieStatus}</span>
</div>
<script src="${pageContext.request.contextPath}/js/XQing.js"></script>

</body>
</html>
